import React, { Component } from 'react';

import img_lobby_paopai_bg from './background/lobby_paopai_bg.jpg';
import img_avatar from './background/avatar_no_one.png';
import img_time from './background/time.png';
import img_blueflag from './background/blueflag.jpg';
import img_redflag from './background/redflag.jpg';

const RoomInfo = ({ room_code, round_title, played_at, ratio }) => (
  <div
    style={{
      flex: 1,
      height: 60 * ratio,
      marginLeft: 22 * ratio,
      marginRight: 17 * ratio,
      alignItems: 'center',
      display: 'flex',
      flexDirection: 'column',
      color: '#2f9cc4',
      fontWeight: 600,
    }}
  >
    <div
      style={{
        display: 'flex',
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginTop: 24 * ratio,
        height: 65 * ratio,
        marginBottom: 10 * ratio,
        fontSize: `${31 / 16 * ratio}em`,
      }}
    >
      <span>{round_title}</span>
      <span style={{ marginRight: 10 }}>房间号：{room_code}</span>
    </div>
    <span
      style={{
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        fontWeight: 600,
        fontSize: `${25 / 16 * ratio}em`,
        alignSelf: 'flex-end',
      }}
    >
      <img
        style={{
          width: 20 * ratio,
          height: 20 * ratio,
          marginRight: 10 * ratio,
        }}
        src={img_time}
        alt=""
      />
      {played_at}
    </span>
  </div>
);

const isUrl = function(str) {
  var RegUrl = new RegExp();
  RegUrl.compile('^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&?/.=]+$');
  if (!RegUrl.test(str)) {
    return false;
  }
  return true;
};

const UserScore = ({ name, avatar, score, wins, finnal_score, ratio, isWinner }) => {
  const fontSize = `${30 / 16 * ratio}em`;
  const color = isWinner ? '#e47e25' : '#2f9cc4';
  const fontWeight = 600;
  const user_avatar = isUrl(avatar) ? avatar : img_avatar;
  return (
    <div
      style={{
        height: 140 * ratio,
        marginBottom: 10 * ratio,
        marginLeft: 22 * ratio,
        marginRight: 17 * ratio,
        paddingLeft: 15 * ratio,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
      }}
    >
      <img
        style={{
          borderRadius: '50%',
          marginLeft: 8 * ratio,
          marginBottom: 8 * ratio,
          width: 76 * ratio,
          height: 76 * ratio,
        }}
        src={user_avatar}
        alt=""
      />
      <div style={{ display: 'flex', flex: 1, flexDirection: 'row', marginBottom: 10 * ratio, alignItems: 'center' }}>
        <span
          style={{
            textOverflow: 'ellipsis',
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            verflow: 'hidden',
            width: 200 * ratio,
            marginLeft: 15 * ratio,
            textAlign: 'left',
            fontSize,
            color,
            fontWeight,
          }}
        >
          {name}
        </span>
        <span style={{ width: 30 * ratio, textAlign: 'right', color, fontSize, fontWeight }}>{wins}</span>
        {isWinner ? (
          <img style={{ width: 26 * ratio, height: 22 * ratio }} src={img_redflag} alt="" />
        ) : (
          <img style={{ width: 26 * ratio, height: 22 * ratio }} src={img_blueflag} alt="" />
        )}

        <span style={{ width: 110 * ratio, textAlign: 'right', fontSize, color, fontWeight }}>{score}</span>
        <span
          style={{
            marginLeft: 40 * ratio,
            flex: 1,
            textAlign: 'center',
            fontSize,
            color: finnal_score > 0 ? '#e47e25' : '#149072',
            fontWeight,
          }}
        >
          {finnal_score > 0 ? `+${finnal_score}` : finnal_score}
        </span>
      </div>
    </div>
  );
};

const ScoreList = ({ scores, ratio }) => {
  return (
    <div style={{ marginTop: 140 * ratio }}>
      {scores.map(({ name, avatar, score, wins, finnal_score }, index) => (
        <UserScore
          key={index}
          name={name}
          avatar={avatar}
          score={score}
          ratio={ratio}
          wins={wins}
          finnal_score={finnal_score}
          isWinner={index === 0}
        />
      ))}
    </div>
  );
};

const Records = ({ room_info, scores, ratio }) => {
  const { room_code, round_title, played_at } = room_info;

  return (
    <div
      style={{
        position: 'absolute',
        left: 39 * ratio,
        right: 39 * ratio,
        top: 289 * ratio,
        bottom: 162 * ratio,
        display: 'flex',
      }}
    >
      <div
        style={{
          width: '100%',
          backgroundSize: '100% 100%',
          display: 'flex',
          flexDirection: 'column',
          paddingTop: 12 * ratio,
        }}
      >
        <ScoreList scores={scores} ratio={ratio} />
        <RoomInfo room_code={room_code} round_title={round_title} played_at={played_at} ratio={ratio} />
      </div>
    </div>
  );
};

// 背景图片的狂高
const size = {
  width: 750,
  height: 1334,
  min_ratio: 0 / 750,
};

class FightRecord extends Component {
  state = {
    ratio: 1,
  };

  componentDidMount() {
    this.setRatio();
  }

  setRatio() {
    const width = document.documentElement.clientWidth;
    const r = width / size.width;
    this.setState({ ratio: r < size.min_ratio ? size.min_ratio : r });
  }

  render() {
    const { room_code, played_at, round_title, scores } = this.props;
    const room_info = {
      room_code,
      round_title,
      played_at,
    };
    const { ratio } = this.state;
    const [width, height] = [size.width * ratio, size.height * ratio];
    return (
      <div style={{ position: 'relative', width, height }}>
        <img style={{ width, height }} src={img_lobby_paopai_bg} alt="战绩图片" />
        <Records room_info={room_info} scores={scores} ratio={ratio} />
      </div>
    );
  }
}

export default FightRecord;
